<template>
  <view class="container">
    <view class="navbar">
      <view class="fixed-content">
        <!-- 状态栏高度 -->
        <view
          :style="{ height: statusBarHeight + 'px' }"
          class="statusBar"
        ></view>
        <!-- <view class="statusBar" style="height:  var(--status-bar-height);"> -->
        <!-- 导航栏高度 -->
        <view class="bar-content" :style="{ height: getNavBarHeight() + 'px' }">
          <slot>
            <image
              @tap="navigateBack()"
              class="nav-left"
              src="/static/image/back.png"
              mode=""
            ></image>
            <view class="nav-title">商品详情</view>
          </slot>
        </view>
      </view>
      <!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
      <view
        :style="{ height: statusBarHeight + getNavBarHeight() + 'px' }"
      ></view>
    </view>
    <view class="goods-info">
      <view class="l_left">
        <image
          class="logo"
          src="/static/image/goodsLogo.jpg"
          mode="widthFix"
        ></image>
      </view>
      <view class="l_middle" mode="heightFix">
        <text class="goods_name">(JD)京东E卡</text>
        <view class="vip-price">
          <text class="unit">¥</text>
          <text class="price">50 </text>
          <text class="isVip" style="margin-left: 10rpx">会员价 </text>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <div class="phone-box">
      <u-form ref="form" :model="form">
        <u-form-item label="手机号" label-width="60px" prop="phone">
          <u-input
            v-model="form.phone"
            type="text"
            placeholder="请输入手机号"
          />
        </u-form-item>
      </u-form>
    </div>
    <view class="introduce">
      <text style="display: block; margin: 20rpx 0">购买须知</text>
      <text
        >京东E卡购买请注意以下提示：
        1.请不要轻信他人通过QQ、微信、短信等传送的非法购买链接。
        2.请不要轻信任何京东E卡折扣、返利宣传
        3.请不要随意告知他人您的京东E卡卡密，请您务必提高警惕避免上当受骗，谢谢!</text
      >
    </view>
    <u-button class="buy" type="error" @click="buyClick">去付款</u-button>
  </view>
</template>

<script>
import api from "@/common/utils/api"; //接口
export default {
  data() {
    return {
      form: {
        phone: "",
      },
      statusBarHeight: 0,
    };
  },
  created() {
    uni.getSystemInfo({
      success: function (info) {
        console.log("Status bar height: " + info.statusBarHeight);
        this.statusBarHeight = info.statusBarHeight;
      },
    });
  },
  mounted() {},
  methods: {
    // 获取状态栏高度
    geStatusBarHeight() {
      return uni.getSystemInfoSync()["statusBarHeight"];
    },
    // 获取导航栏高度
    getNavBarHeight() {
      // #ifdef MP-WEIXIN
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）
      // let navbarHeight =
      //   menuButtonInfo.height +
      //   (menuButtonInfo.top - uni.getSystemInfoSync()["statusBarHeight"]) * 2 +
      //   2;
      // #endif
      // #ifdef APP-PLUS || H5
      let navbarHeight = 44;
      // #endif
      return navbarHeight;
    },
    navigateBack() {
      uni.navigateBack();
    },
    buyClick() {
      if (!this.form.phone) {
        uni.showToast({
          title: "请输入手机号！",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss" >
.navbar {
  .fixed-content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 24rpx;
    z-index: 1996;
    .bar-content {
      display: flex;
      align-items: center;
      position: relative;
      .nav-left {
        width: 22px;
        height: 22px;
        position: absolute;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
      }
      .nav-title {
        font-weight: bold;
        font-size: 16px;
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
      }
    }
  }
}
.goods-info {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 10px 0;
  border-bottom: 4rpx solid #efefef;
}
.l_left {
  height: 180rpx;
  width: 200rpx;
  /* max-width: 250rpx; */
  text-align: center;
}
.logo {
  width: 140rpx;
  height: 140rpx;
  border-radius: 10rpx;
}
.l_middle {
  height: 180rpx;
  /* max-width: 250rpx; */
  flex: 1;
  display: flex;
  flex-direction: column;
}
.goods_name {
  margin-top: 12rpx;
}
.vip-price {
  margin-top: 50rpx;
  color: #f56c6c;
}
.phone-box {
  padding-left: 20rpx;
}
.introduce {
  padding: 20rpx;
}
.buy {
  position: fixed;
  bottom: 40rpx;
  left: 10%;
  width: 80%;
}
.statusBar {
  // background: red;
}
.bar-content {
  // background: orange;
}
</style>